{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Web应用介绍\n",
    "\n",
    "![web application](http://intelhunt.com/images/Web-Application-Development1.jpg)\n",
    "\n",
    "Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。\n",
    "\n",
    "HTML是一种用来定义网页的文本，会HTML，就可以编写网页；\n",
    "\n",
    "HTTP是在网络上传输HTML的协议，用于浏览器和服务器的通信。\n",
    "\n",
    "调试Web应用推荐使用<strong>Chrome浏览器</strong>\n",
    "\n",
    "### HTML\n",
    "\n",
    "HTML文档就是一系列的Tag组成，最外层的Tag是\\<html\\>。规范的HTML也包含\\<head\\>...\\</head\\>和\\<body\\>...\\</body\\>（注意不要和HTTP的Header、Body搞混了），由于HTML是富文档模型，所以，还有一系列的Tag用来表示链接、图片、表格、表单等等\n",
    "    \n",
    "### CSS\n",
    "\n",
    "CSS是Cascading Style Sheets（层叠样式表）的简称，CSS用来控制HTML里的所有元素如何展现\n",
    "\n",
    "### JavaScript简介\n",
    "\n",
    "JavaScript虽然名称有个Java，但它和Java真的一点关系没有。JavaScript是为了让HTML具有交互性而作为脚本语言添加的，JavaScript既可以内嵌到HTML中，也可以从外部链接到HTML中。如果我们希望当用户点击标题时把标题变成红色，就必须通过JavaScript来实现：\n",
    "\n",
    "如果要学习Web开发，首先要对HTML、CSS和JavaScript作一定的了解。HTML定义了页面的内容，CSS来控制页面元素的样式，而JavaScript负责页面的交互逻辑。\n",
    "\n",
    "讲解HTML、CSS和JavaScript就可以写3本书，对于优秀的Web开发人员来说，精通HTML、CSS和JavaScript是必须的，这里推荐一个在线学习网站w3schools：\n",
    "\n",
    "http://www.w3school.com.cn/\n",
    "\n",
    "当我们用Python或者其他语言开发Web应用时，我们就是要在服务器端动态创建出HTML，这样，浏览器就会向不同的用户显示出不同的Web页面。\n",
    "\n",
    "### Web应用例子\n",
    "\n",
    "![application](https://daproim.com/wp-content/uploads/2017/09/webdesign-1.png)\n",
    "\n",
    "\n",
    "### 静态网站和动态网站\n",
    "\n",
    "1. http://www.wuzhen.com.cn/\n",
    "2. https://similar.ai/\n",
    "3. https://www.taobao.com/\n",
    "4. https://www.toutiao.com/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "编写一个server.py，负责启动WSGI服务器，加载application()函数："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# server.py\n",
    "# 从wsgiref模块导入:\n",
    "from wsgiref.simple_server import make_server\n",
    "# 导入我们自己编写的application函数:\n",
    "# from hello import application\n",
    "\n",
    "def application(environ, start_response):\n",
    "    start_response('200 OK', [('Content-Type', 'text/html')])\n",
    "    return [b'<h1>Hello, web!</h1>']\n",
    "\n",
    "# 创建一个服务器，IP地址为空，端口是8000，处理函数是application:\n",
    "httpd = make_server('', 8000, application)\n",
    "print('Serving HTTP on port 8000...')\n",
    "# 开始监听HTTP请求:\n",
    "httpd.serve_forever()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "## 练习\n",
    "\n",
    "### 参考上面的例子,开启一个服务器"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Flask框架\n",
    "\n",
    "WSGI提供的接口虽然比HTTP接口高级了不少，但和Web App的处理逻辑比，还是比较低级，我们需要在WSGI接口之上能进一步抽象，让我们专注于用一个函数处理一个URL，至于URL到函数的映射，就交给Web框架来做\n",
    "\n",
    "用Python开发一个Web框架十分容易，所以Python有上百个开源的Web框架。这里我们先不讨论各种Web框架的优缺点，直接选择一个比较流行的Web框架——Flask来使用"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# 再来一个Hello\n",
    "from flask import Flask\n",
    "app = Flask(__name__)\n",
    "\n",
    "@app.route('/')\n",
    "def hello_world():\n",
    "    return 'Hello, World!'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "更多内容，请到[官网查看](http://docs.jinkan.org/docs/flask/quickstart.html)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 练习：\n",
    "\n",
    "先看　flask_post.py 和　flask_example.py\n",
    "\n",
    "再看　flask_api.py，完成里面练习，需要用到之前的db_test.py 和　db.sqlite 数据库"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
